<template>
  <div class="custom-tabbar">
    <van-tabbar :z-index="999" @change="onChange" :value="tabActiveGetter" active-color="#0a1450" inactive-color="#999">
      <template v-for="(item,index) in list">
        <van-tabbar-item :name="item.pagePath" v-if="item.pagePath !=='/release'" :key="index">
          <span>{{ item.text }}</span>
          <template #icon>
            <img v-if="tabActiveGetter === item.pagePath" :src="item.selectedIconPath"/>
            <img v-else :src="item.iconPath"/>
          </template>
        </van-tabbar-item>
        <van-tabbar-item :name="item.pagePath" v-else :key="index">
          <div class="tabBar-img-add flex-center">
            <img src="@/assets/img/tabbar/add.png"/>
          </div>
        </van-tabbar-item>
      </template>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "customTabbar",
  data() {
    return {
      list: [
        {
          "pagePath": "/home",
          "text": "主页",
          "iconPath": require("@/assets/img/tabbar/2.png"),
          "selectedIconPath": require("@/assets/img/tabbar/1.png")
        },
        {
          "pagePath": "/learning",
          "text": "学习",
          "iconPath": require("@/assets/img/tabbar/4.png"),
          "selectedIconPath": require("@/assets/img/tabbar/3.png")
        },
        {
          "pagePath": "/release",
        },
        {
          "pagePath": "/ranks",
          "text": "队伍",
          "iconPath": require("@/assets/img/tabbar/6.png"),
          "selectedIconPath": require("@/assets/img/tabbar/5.png")
        },
        {
          "pagePath": "/my",
          "text": "我的",
          "iconPath": require("@/assets/img/tabbar/8.png"),
          "selectedIconPath": require("@/assets/img/tabbar/7.png")
        },
      ]
    }
  },

  methods: {
    onChange(path) {
      if (!this.tokenGetter && path !== '/home') {
        this.$router.push('/login')
        return
      }
      this.$router.replace(path)
      this.$store.commit("setTabActive", path);
    },
  }
}
</script>

<style scoped lang="scss">
.custom-tabbar {
  ::v-deep .van-tabbar {
    padding-bottom: 20px;
  }

  .tabBar-img-add {
    width: 43px;
    height: 43px;
    background-color: var(--theme-txt-color);
    border-radius: 8px;
    transform: rotate(45deg);
    margin-bottom: 8px;
    position: relative;
    z-index: 999;


    img {
      width: 21px;
      height: 21px;
    }
  }
}
</style>